<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入资源</title>
    <!-- 当我们屏幕大于等于640px以上的,我们让div 一行显示2个 -->
    <!-- 当我们屏幕小于640 我们让div一行显示一个 -->
    <!-- 一个建议:我们媒体查询最好的方法是从小到大 -->
    <!-- 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 -->
    <link rel="stylesheet" href="css/style320.css" media="screen and (min-width:320px)" >
    <link rel="stylesheet" href="css/style640.css" media="screen and (min-width:640px)">
</head>
<body>
    <div>1</div>
    <div>2 </div>
</body>
</html>